<template>
    <div>
        <mc-vxe-table
        mc-query-url="public/table.json" mc-save-url="magical_lowcode/openapi/crud/user/save"
        mc-delete-url="magical_lowcode/openapi/crud/user/delete-by-pk" mc-query-method="get"
        :mc-pager-count="7" :mc-page-size="2" :stripe="true" :highlight-hover-row="true"
        :mc-from-parent-query="parentQuery"
        >
        		<template v-slot:query="data">
        			<el-form label-width="100px">
        				<el-form-item label="开关">
        					<mc-switch v-model="data.query.kg" :mc-allow-null="true"></mc-switch>
        				</el-form-item>
        			</el-form>
        		</template>
        		<mc-vxe-table-column title="主键" field="id"></mc-vxe-table-column>
        		<mc-vxe-table-column title="用户名" field="userName"></mc-vxe-table-column>
        		<template v-slot:form="data">
        			<el-form class="mc-ui-absolute-pane" label-width="100px">
        				<el-form-item style="position: absolute; left: 2.00445%; top: 5.80431%;" label="开关">
                  <mc-switch v-model="data.form.kg" :mc-default-value="true"></mc-switch>
        				</el-form-item>
        			</el-form>
        		</template>
        		//子表
        		<template v-slot:parent="data">
                <mc-vxe-table :mc-from-parent-query="data.parent" :mc-pid-field-map="{'pid':'id'}"
                  mc-query-url="public/table-child.json"  mc-query-method="get"  :stripe="true" :highlight-hover-row="true"
                  :mc-pager-count="7" :mc-page-size="2">
                    <mc-vxe-table-column title="主键" field="id"></mc-vxe-table-column>
                    <mc-vxe-table-column title="用户名" field="userName"></mc-vxe-table-column>
                    <mc-vxe-table-column title="父亲id" field="pid"></mc-vxe-table-column>
                  </mc-vxe-table>
            </template>
        	</mc-vxe-table>

        	<el-button @click="changeParentQuery">改变parentQuery</el-button>
    </div>
</template>

<script>
import McVxeTable from './components/McVxeTable'
import McVxeTableColumn from './components/McVxeTableColumn'
import McCheckboxGroup from './components/McCheckboxGroup'
import McSwitch from "./components/McSwitch";
export default {
    data(){
        return {
            parentQuery:{pid:1}
		    }
    },
    components:{
        McVxeTable,
        McVxeTableColumn,
        McCheckboxGroup,
        McSwitch
    },
    methods : {
        /*提交前回调*/
        beforeSubmitForm:function(formData){
            console.log(formData)
            return true;
        },
        focus:function(){
        },
        changeParentQuery(){
            this.parentQuery.pid = new Date().getTime()
            console.log(this.parentQuery)
        }
    }
}
</script>

<style>

</style>
